Par DocuGenerate Créer des systèmes professionnels d’intégration client peut être complexe, surtout lorsque vous devez générer des documents personnalisés et les livrer automatiquement par e-mail. Les approches traditionnelles nécessitent souvent un travail de développement important, des intégrations personnalisées et une expertise technique significative. Cependant, avec des plateformes no-code modernes comme Bubble combinées à des services spécialisés de génération de documents, vous pouvez créer des workflows sophistiqués qui gèrent tout, de la collecte de données à la livraison des documents.
Dans ce tutoriel complet, nous allons créer un système d’intégration client qui collecte les informations du client via un formulaire web, génère des accords de confidentialité (NDA) personnalisés à partir de ces données, et envoie automatiquement les documents complétés en pièce jointe par e-mail. Cette approche montre comment exploiter la plateforme de développement visuel de Bubble avec l’API de génération de documents de DocuGenerate pour créer des workflows professionnels sans écrire de code.
Le système que nous allons créer met en valeur plusieurs concepts puissants : génération automatique de documents à partir de soumissions de formulaire, intégration entre plateformes no-code et API externes, et livraison professionnelle par e-mail avec pièces jointes. Ce workflow est particulièrement utile pour les entreprises qui doivent traiter des accords clients, des contrats ou d’autres documents personnalisés à grande échelle tout en conservant une apparence professionnelle et une livraison fiable.
Pour accélérer notre processus de développement, nous allons utiliser la fonctionnalité innovante de générateur de pages IA de Bubble, qui peut générer des interfaces d’application complètes à partir de descriptions en langage naturel. Cette fonctionnalité, publiée en bêta publique à la mi-juin 2024 et annoncée officiellement lors de l’événement Zero to One With AI + No-Code, représente une avancée significative dans le développement d’applications no-code.
Le générateur de pages IA nous permet de décrire nos exigences en langage simple et de recevoir une structure d’application entièrement fonctionnelle, avec formulaires, workflows et types de données. Cette approche réduit considérablement le temps de développement tout en garantissant que l’application générée respecte les bonnes pratiques et les modèles de conception de Bubble.
Pour notre système de signature de NDA, nous allons fournir l’invite détaillée suivante au générateur IA : “Help me create a web page that will allow my clients to sign NDAs. The web page needs to be modern and contain a form with the following fields: Name, Address, Email and Country. The form data will be used to generate the NDA using DocuGenerate and send it by email to the client.”
Cette invite fournit à l’IA suffisamment de contexte pour comprendre à la fois les exigences fonctionnelles (champs du formulaire, traitement des données) et le workflow visé (génération de documents et livraison par e-mail). L’IA utilisera ces informations pour créer les structures de données, les éléments d’interface utilisateur et les configurations de workflow initiales appropriées.
Le processus de génération prend généralement plusieurs minutes, pendant lesquelles l’IA de Bubble analyse les exigences, crée les composants nécessaires et les assemble en une application cohérente. Il est important de garder l’onglet du navigateur ouvert pendant ce processus, car le fermer peut interrompre la génération.
Une fois que l’IA termine le processus de génération, vous disposez d’une application entièrement fonctionnelle avec plusieurs pages, structures de données et workflows initiaux. L’application générée illustre l’approche systématique de Bubble en matière d’architecture d’application, avec une séparation claire entre les différentes zones fonctionnelles et une organisation logique des données. L’application générée par l’IA comprend deux pages principales qui fonctionnent ensemble pour créer une expérience utilisateur complète.
Elle constitue le point d’entrée principal où les clients interagissent avec votre système. La page présente un design moderne et épuré avec un formulaire complet qui collecte toutes les informations nécessaires à la génération du NDA. Le formulaire comprend des champs pour le Nom complet, l’Adresse, l’Adresse E-mail et le Pays, ainsi qu’un bouton Submit NDA Request bien visible qui déclenche le workflow de génération de document et de livraison par e-mail.
Le design de la page d’accueil privilégie l’expérience utilisateur avec un étiquetage clair, une validation de formulaire appropriée et un retour visuel. La mise en page est responsive et professionnelle, garantissant que les clients peuvent facilement remplir le formulaire quel que soit leur appareil ou leur niveau de compétence technique.
Après la soumission du formulaire, les utilisateurs sont automatiquement redirigés vers cette page, qui fournit un retour immédiat sur le statut de leur demande. La page de confirmation affiche les informations soumises et montre le statut de traitement actuel, créant de la transparence et renforçant la confiance des utilisateurs dans le système.
Cette structure en deux pages suit des modèles établis pour les applications basées sur des formulaires, offrant aux utilisateurs un retour clair et maintenant leur engagement tout au long du processus.
Le générateur IA crée automatiquement le type de données NdaSubmission, qui constitue la base du stockage et de la gestion des informations client tout au long du workflow. Cette structure de données est conçue pour gérer à la fois la soumission initiale du formulaire et les différents champs de suivi de statut nécessaires à la génération de document et à la livraison par e-mail.
Le type de données NdaSubmission comprend les champs suivants :
address (texte) : Stocke l’adresse complète du clientconfirmation_email_sent (oui/non) : Indique si l’e-mail de confirmation initial a été envoyécountry (texte) : Enregistre le pays du clientdocugenerate_status (texte) : Surveille le statut du processus de génération de documentemail (texte) : Contient l’adresse e-mail du client pour la livraison du documentname (texte) : Stocke le nom complet du clientnda_email_sent (oui/non) : Indique si le NDA a été livré avec succèssubmission_date (date) : Enregistre la date de soumission initiale du formulaireCette structure de données complète prend en charge à la fois les exigences immédiates du workflow et les améliorations futures, comme les rapports, les analyses et le suivi de statut avancé.
L’application générée comprend un jeu de données d’exemple bien pensé qui remplit la table NdaSubmission avec des entrées réalistes. Ces données d’exemple servent plusieurs objectifs : elles illustrent le format de données attendu, fournissent un contenu immédiat pour tester les workflows, et offrent des exemples de la façon dont le système gère différents scénarios client.
Disposer immédiatement de données d’exemple vous permet de tester le workflow complet sans avoir à créer manuellement des entrées de test. Cette approche accélère le développement et garantit que vous pouvez vérifier que tous les composants du système fonctionnent correctement avant le déploiement en production.
Pour activer les capacités de génération de documents dans notre application Bubble, nous devons installer et configurer le plugin DocuGenerate depuis la marketplace de Bubble. Ce plugin fournit un accès direct aux fonctionnalités de l’API DocuGenerate via le système de workflow visuel de Bubble, éliminant le besoin d’une intégration API personnalisée.
Le processus d’installation du plugin est simple et suit les procédures standards de gestion des plugins de Bubble. Accédez à la section Plugins de votre éditeur Bubble, recherchez “DocuGenerate” dans la marketplace, puis cliquez sur Install :
Après avoir installé le plugin, vous devrez le configurer avec vos identifiants API DocuGenerate. Cette configuration établit la connexion entre votre application Bubble et votre compte DocuGenerate, permettant une communication sécurisée pour les demandes de génération de documents.
La configuration nécessite votre Clé API DocuGenerate, que vous pouvez trouver dans les paramètres de votre compte DocuGenerate. Cette clé API authentifie vos demandes et garantit que les documents générés sont correctement associés à votre compte et à vos limites d’utilisation.
Une fois configuré, le plugin donne accès à toutes les fonctionnalités de DocuGenerate via le système d’actions de Bubble, y compris la génération de documents, la gestion des modèles et le suivi de statut. Le plugin gère automatiquement l’authentification, le formatage des demandes et le traitement des réponses, vous permettant de vous concentrer sur la logique de votre application plutôt que sur la gestion des détails d’intégration de l’API.
Avant de pouvoir générer des NDA personnalisés, nous devons créer un modèle qui définit la structure du document et identifie où les informations spécifiques au client doivent être insérées. Pour ce tutoriel, nous allons utiliser le modèle Non Disclosure Agreement de la Bibliothèque de Modèles de DocuGenerate, qui fournit un document juridique formaté de manière professionnelle avec des balises de fusion appropriées.
Le modèle comprend plusieurs sections clés qui le rendent adapté à notre workflow automatisé :
Informations des Parties : Le modèle comprend des sections dédiées à la fois pour la partie divulgatrice (votre entreprise) et la partie destinataire (le client), avec des balises de fusion qui seront remplies avec les informations de notre formulaire Bubble.
Cadre Juridique : Tout le langage juridique nécessaire est pré-rédigé et formaté de manière appropriée, garantissant que les documents générés respectent des normes juridiques professionnelles sans nécessiter d’expertise juridique pour les créer.
Intégration des Balises de Fusion : Le placement stratégique des balises de fusion dans tout le document permet une insertion de contenu dynamique tout en maintenant un formatage et une structure juridique appropriés.
Le modèle utilise la syntaxe des balises de fusion de DocuGenerate pour identifier où le contenu dynamique doit être inséré. Ces balises correspondent aux données que nous allons collecter dans notre formulaire Bubble et envoyer via l’API DocuGenerate pendant le processus de génération.
L’application générée par l’IA fournit un workflow de base que nous devons améliorer avec des capacités de génération de documents et de livraison par e-mail. Le workflow initial comprend le traitement de base du formulaire et la navigation entre pages, mais nous allons l’étendre pour inclure le processus complet d’automatisation des documents.
Le workflow existant sur la page d’accueil comprend trois étapes principales qui gèrent le processus de base de soumission du formulaire :
NdaSubmission avec les données du formulaire
Ce workflow de base capture les données du formulaire et fournit un retour à l’utilisateur, mais il n’inclut pas encore la fonctionnalité de génération de document ou de livraison par e-mail dont nous avons besoin. Nous allons construire sur cette base en ajoutant des étapes de workflow supplémentaires qui gèrent ces fonctionnalités avancées.
L’étape suivante consiste à ajouter une action de génération de document à notre workflow. Cette action se déclenchera immédiatement après l’enregistrement des données du formulaire, garantissant que la génération de document commence dès que les informations du client sont disponibles dans le système.
Pour ajouter l’étape de génération de document, cliquez sur le bouton + après les étapes de workflow existantes, accédez à la section Plugins, et sélectionnez DocuGenerate - Generate Document.
L’action de génération de document nécessite plusieurs paramètres de configuration qui relient les données de notre formulaire au modèle DocuGenerate :
template_id : Identifie le modèle de NDA spécifique que nous avons créé dans DocuGenerate. Chaque modèle possède un ID unique qui indique au système quelle structure de document utiliser pour la génération.
name : Nous allons définir ce champ pour inclure dynamiquement le nom du client. Cela crée des noms de fichiers descriptifs qui facilitent l’identification des documents générés.
output_format : Saisissez .pdf pour générer des documents PDF, qui offrent un formatage cohérent sur différents appareils et plateformes tout en conservant une apparence professionnelle.
data : Il s’agit de la partie la plus complexe de la configuration, car elle nécessite de mapper les données de notre formulaire aux balises de fusion du modèle. Les données doivent être formatées comme un tableau JSON contenant les valeurs dynamiques de la soumission de notre formulaire.
Cette structure JSON associe chaque balise de fusion du modèle soit à des informations statiques (comme les coordonnées de votre entreprise), soit à des données dynamiques provenant de la soumission du formulaire. Les valeurs dynamiques utilisent la syntaxe de Bubble pour référencer les données créées lors de la première étape du workflow, garantissant que chaque document généré contient les bonnes informations client :
[{
"Effective Date": "Result of step 1 (Create a new NdaSubmission)'s submission_date:formatted as 8/30/25",
"Disclosing Party Name": "NDA Signer",
"Disclosing Party Address": "93 East Lassen Street, Los Angeles, CA, 90013",
"Receiving Party Name": "Result of step 1 (Create a new NdaSubmission)'s name",
"Receiving Party Address": "Result of step 1 (Create a new NdaSubmission)'s address",
"Governing Country": "Result of step 1 (Create a new NdaSubmission)'s country"
}]
La dernière étape du workflow gère la livraison par e-mail du document généré. Cela implique d’utiliser la fonctionnalité d’e-mail native de Bubble pour envoyer le PDF en pièce jointe à l’adresse e-mail du client. Le système de livraison par e-mail offre une communication professionnelle tout en garantissant que les clients reçoivent leurs documents rapidement et de manière fiable.
Pour ajouter l’étape d’e-mail, cliquez sur le signe + après l’étape de génération de document et sélectionnez Send email dans le sous-menu Email :
La configuration de l’e-mail nécessite plusieurs paramètres qui créent une expérience de communication professionnelle :
Destinataire : Définissez sur Result of step 1 (Create a new NdaSubmission)'s email pour envoyer automatiquement à l’adresse e-mail soumise par le client.
Nom de l’Expéditeur : Utilisez un nom professionnel comme “NDA Signer” ou le nom de votre entreprise pour établir la crédibilité et la reconnaissance de marque.
Ligne de Sujet : Créez un sujet clair et professionnel comme “Your NDA is ready” qui communique immédiatement l’objet de l’e-mail.
Corps de l’E-mail : Rédigez un message personnalisé qui reste professionnel.
Pièce Jointe : Il s’agit du point de configuration le plus critique. Définissez-le sur Result of step 2 (DocuGenerate - Generate Document)'s document_uri:saved to Bubble Storage.
Le modificateur :saved to Bubble Storage est essentiel pour une gestion correcte des pièces jointes par e-mail. Sans ce modificateur, Bubble ne peut pas accéder au fichier PDF généré pour la pièce jointe. Cela indique à Bubble de télécharger le document généré depuis DocuGenerate et de le stocker temporairement dans le système de fichiers de Bubble, le rendant disponible pour la pièce jointe de l’e-mail.
Une fois tous les composants du workflow configurés, nous pouvons tester l’application complète pour vérifier que chaque étape fonctionne correctement et que l’intégration entre Bubble, DocuGenerate et la livraison par e-mail fonctionne comme prévu. Cette phase de test est cruciale pour identifier tout problème de configuration avant de déployer l’application en production.
Bubble fournit un mode de prévisualisation qui vous permet de tester votre application dans un environnement réel sans affecter les utilisateurs de production. Vous pouvez accéder à la version de test de notre application de NDA ici. L’environnement de test offre des capacités de mode débogage, qui fournissent des informations détaillées sur l’exécution du workflow, le traitement des données et les erreurs éventuelles pendant les tests.
Le processus de test implique de réaliser tout le parcours utilisateur, de la soumission du formulaire à la réception du document. Lors des tests, utilisez des informations réalistes qui reflètent les données client attendues pour garantir que le système gère correctement les différents scénarios. Après avoir rempli le formulaire avec les informations du client, le système traite automatiquement la demande à travers toutes les étapes du workflow :
1. Traitement du Formulaire : Les informations du client sont validées et stockées dans la base de données. 2. Génération du Document : Le NDA est créé avec les informations personnalisées. 3. Envoi par E-mail : Le document complété est envoyé en pièce jointe. 4. Retour à l’Utilisateur : La page de confirmation affiche le statut actuel.
L’e-mail généré illustre l’apparence professionnelle et le fonctionnement du système complet :
L’e-mail comprend le contenu du message personnalisé, un formatage professionnel, et le NDA généré en pièce jointe PDF. Cela démontre que l’ensemble du workflow fonctionne correctement et offre une expérience professionnelle aux clients.
Un aspect important des tests consiste à vérifier que les documents générés sont correctement stockés dans le système de gestion de fichiers de Bubble. Cette capacité de stockage offre un accès de secours aux documents générés et prend en charge des améliorations futures comme l’historique des documents ou les fonctionnalités de renvoi.
Le gestionnaire de fichiers montre que chaque NDA généré est correctement stocké avec des conventions de nommage appropriées et accessible pour référence future. Cette capacité de stockage garantit que votre système conserve un historique de tous les documents générés, prenant en charge les exigences de conformité et les besoins du service client.
Créer un système automatisé de génération de documents et de livraison par e-mail avec Bubble et DocuGenerate démontre la puissance des plateformes de développement no-code modernes lorsqu’elles sont combinées à des API spécialisées. Le système que nous avons créé gère des processus métier complexes incluant la collecte de données, la personnalisation de documents et la communication professionnelle, tout cela sans nécessiter de compétences traditionnelles en développement logiciel.
Cette approche offre des avantages significatifs pour les entreprises qui doivent traiter des documents clients à grande échelle. Le workflow automatisé élimine la création manuelle de documents, réduit les erreurs, garantit un formatage cohérent et offre des expériences client professionnelles. L’intégration entre la plateforme de développement visuel de Bubble et les capacités de génération de documents de DocuGenerate crée une solution à la fois puissante et accessible.
Saisissez votre e-mail pour recevoir la dernière newsletter de DocuGenerate
Découvrez comment créer un analyseur de CV intelligent qui traite automatiquement les candidatures à l'aide de Pipedream, Claude AI et DocuGenerate. Ce tutoriel étape par étape montre comment extraire les données clés des CV et les utiliser pour créer des rapports PDF.
Découvrez comment créer un workflow automatisé de génération de factures avec n8n et DocuGenerate qui surveille un dossier pour les fichiers Excel, extrait les données et génère des factures PDF professionnelles. Idéal pour un traitement local sans dépendre de multiples solutions cloud.
Découvrez comment créer automatiquement de nouveaux modèles lorsque des documents Google Docs sont ajoutés à un dossier, et mettre à jour les modèles lorsque les documents sont modifiés. Idéal pour les équipes qui préfèrent travailler dans Google Docs mais ont besoin de la puissance de DocuGenerate pour la génération de documents.